﻿@model IEnumerable<DeviceFinder.Models.DeviceShowModel>

@{
    ViewBag.Title = "Devices";
}
@section PreLoad{
    <script src="@Url.Content("~/IndependentComponent/DataTable-v1.9/jquery.dataTables.js")"></script>
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/IndependentComponent/DataTable-v1.9/demo_page.css")" />
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/IndependentComponent/DataTable-v1.9/demo_table.css")" />
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function () {
            $('#example').dataTable();
        });
    </script>
    <style type="text/css" title="currentStyle">
       
    </style>
}
<div style="margin: auto">

    @{Html.RenderPartial("../Shared/UserCPLeftMenu");}    
    <center><h2>Device Manager</h2></center>

    <div id="table" style="width: 100%; float: left;">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
            <thead>
		        <tr>
			        <th>Device Name</th>
                    <th>Type</th>   
                    <th>Home page</th>  
                    <th>HomePage you have to set</th>               
                    <th>Follow</th>
                    <th>Command</th>                    
                    <th>Delete</th>
		        </tr>
	        </thead>                         
            <tbody>
            @{
                string url = HttpContext.Current.Request.Url.AbsoluteUri.Replace(HttpContext.Current.Request.Url.AbsolutePath, "");
            }
            @if (Model != null)
            {
                for (int i = 0; i < Model.Count(); i++)
                {
                    var device = Model.ElementAt(i);   
		            <tr class = "gradeA">
			            <td class = "center">@device.Name</td>
                        <td class = "center">@device.Type</td>
                        <td class = "center">@device.HomePage</td>
                        <td class = "center"><a href="@url/User/HomePage/@device.ID">@url/User/HomePage/@device.ID</a></td>
                        <td class = "center">@device.IsFollow</td>
                        <td class = "center">@device.IsActiveCommand</td>
                        <td class = "center">
                             @Html.ActionLink("See Info", "DeviceChangeSettings", "User", routeValues: new { id = @device.ID }, htmlAttributes: null)/
                             @Html.ActionLink("remove", "RemoveItem", "User", routeValues: new { id = @device.ID }, htmlAttributes: null)
                        </td>
		            </tr>
                }
            }          
	        </tbody>
            <!--
	        <tfoot>
		        <tr>
			        <th>Rendering engine</th>
			        <th>Browser</th>
			        <th>Platform(s)</th>
			        <th>Engine version</th>
			        <th>CSS grade</th>
		        </tr>
	        </tfoot>
            -->
        </table>
    </div>
    <center> <a href="AddDevice"> <img src="../../Images/add-device-btn.png" /> </a> </center>
</div>
<div style="clear: both">
</div>
